<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <title th:text="#{cas.oauth.confirm.pagetitle}"></title>
</head>

<body id="cas">
<div layout:fragment="content" style="box-shadow: unset">

    <div id="confirmation" class="banner banner-info mdc-card card p-2 m-auto w-lg-50" style="display: none">
        <h2 th:utext="#{screen.oidc.confirm.ciba.header}">Success</h2>
        <p th:utext="#{screen.oidc.confirm.ciba.confirmed}" class="intro">Authentication request is now confirmed.</p>
    </div>
    
    <div id="cibaContainer" class="banner mdc-card card p-4 m-auto w-lg-66">
        <h1 th:text="#{screen.oidc.confirm.ciba.header}"/>
        
        <div class="d-flex flex-column align-items-center mb-2">
            <img th:src="${registeredService.logo}" th:if="${registeredService.logo}"/>
            <h2 th:text="${registeredService.name}"/>
            <p th:text="${registeredService.description}"/>
        </div>

        <div id="scopes" th:unless="${#sets.isEmpty(cibaRequest.scopes)}">
            <h3 class="border-bottom bg-primary p-2" th:text="#{screen.oidc.confirm.scopes}"/>
            <p th:text="#{screen.oidc.confirm.asksinfo}"/>

            <dl class="dl-class0 dl-class1">
                <div th:each="scope : ${cibaRequest.scopes}">
                    <span th:id="${scope}">
                        <dt class="dt-class0 dt-class1 mdi mdi-cog"> <strong><code th:text="${claim}"/></strong></dt>
                        <dd class="dd-class0 dd-class1" th:utext="#{screen.oidc.confirm.scope.__${scope}__}"/>
                    </span>
                </div>
            </dl>
        </div>
    
        <div th:if="${registeredService.informationUrl}" class="my-2">
            <i class="mdi mdi-comment fas fa-comment" aria-hidden="true"></i>
            <a id="informationUrl" th:href="${registeredService.informationUrl}"
               th:utext="#{screen.oidc.confirm.infourl(${registeredService.name})}"/>
        </div>
        <div th:if="${registeredService.privacyUrl}" class="my-2">
            <i class="mdi mdi-eye fas fa-eye" aria-hidden="true"></i>
            <a id="privacyUrl" th:href="${registeredService.privacyUrl}"
               th:utext="#{screen.oidc.confirm.privacyurl(${registeredService.name})}"/>
        </div>

        <span th:if="${bindingMessage}">
            <h3 class="strong border-bottom pb-2 mt-4" th:utext="#{screen.oidc.confirm.bindingmessage.header}">Binding Message</h3>
            <sub th:text="#{screen.oidc.confirm.bindingmessage.description}"/>
            <pre id="bindingMessage" th:text="${bindingMessage}"/>
        </span>

        <div class="d-flex">
            <form id="fm1" method="post">
                <section id="userCodeSection" th:if="${userCodeRequired}" class="cas-field my-3 mdc-input-group form-group">
                    <div class="mdc-input-group-field mdc-input-group-field-append">
                        <div class="d-flex caps-check">
                            <label for="userCode"
                                   class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon control-label">
                                <span class="mdc-notched-outline">
                                    <span class="mdc-notched-outline__leading"></span>
                                    <span class="mdc-notched-outline__notch">
                                        <span class="mdc-floating-label" th:utext="#{screen.oidc.confirm.usercode.header}">User Code</span>
                                    </span>
                                    <span class="mdc-notched-outline__trailing"></span>
                                </span>
                                <input class="mdc-text-field__input form-control pwd"
                                       type="password"
                                       name="userCode"
                                       id="userCode"
                                       size="50"
                                       autocomplete="one-time-code" required/>
                            </label>

                            <button class="reveal-password mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button"
                                    tabindex="-1"
                                    type="button" th:title="#{screen.pm.password.toggle}">
                                <i class="mdi mdi-eye reveal-password-icon" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="mdc-text-field-helper-line caps-warn">
                            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg text-danger">
                                <span th:utext="#{screen.capslock.on}"/>
                            </p>
                        </div>
                        <sub th:text="#{screen.oidc.confirm.usercode.description}"/>
                    </div>
                </section>

                <div id="error" class="banner banner-danger banner-dismissible mdc-card card p-2 m-auto w-100" style="display: none">
                    <h2 th:utext="#{screen.oidc.confirm.ciba.header}">Error</h2>
                    <p th:utext="#{screen.oidc.confirm.ciba.failed}" class="intro mt-0">Failed to confirm authentication request.</p>
                </div>
                <br/>
                <div class="d-flex">
                    <div th:replace="~{fragments/submitbutton :: submitButton (messageKey='screen.welcome.button.confirm', id='confirmButton')}"/>
                </div>
                <input type="hidden" id="loginCsrfToken" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <input type="hidden" name="cibaRequestId" th:value="${cibaRequest.id}"/>

                <script type="text/javascript">
                    function jqueryReady() {
                        const form = document.getElementById("fm1");
                        form.submit = () => false;
                        $("#fm1").submit(function (event) {
                            event.preventDefault();
                            const formData = $(this).serialize();
                            console.log(formData);

                            const csrfToken = $('#loginCsrfToken').val();
                            console.log(`CSRF Token: ${csrfToken}`);
                            
                            $.ajax({
                                type: "POST",
                                url: location.href,
                                data: formData,
                                headers: {
                                    "X-CSRF-TOKEN": csrfToken
                                },
                                success: (response, status, xhr) => {
                                    if (xhr.status === 200) {
                                        $("#error").hide();
                                        $("#cibaContainer").hide().empty();
                                        $("#confirmation").show();
                                    }
                                },
                                error: (xhr, status, error) => {
                                    $("#error").show();
                                    $("#confirmation").hide();
                                    $("#confirmButton").prop("disabled", false);
                                }
                            });
                        })
                    }
                    
                </script>
            </form>
        </div>
    </div>
</div>
</body>
</html>
